// 一、显示相关
// (1)主题
// 1. 内置主题
// ECharts中默认内置了两套主题:light dark
// 在初始化对象方法init中可以指明
// var chart = echarts.init(dom, "light");

// 2.自定义主题
// echarts官网首页-->下载下拉列表的主题下载-->定制主题-->编辑好主题后下载主题即可
// https://echarts.apache.org/zh/theme-builder.html
//1.在主题编辑器中编辑主题
// 2.下载主题，是一个js文件
// 3.引入主题js文件
// 4.在init方法中使用主题

// (2)调色盘
// 它是一组颜色，图形、系列会自动从其中选择颜色。
// 主题调色盘
// 在自定义主题js文件里面的color里

// 全局调色盘:
// option : {
// color: ["red" ,"green", "blue" ]

// 局部调色盘:
// series: [{
// type:'bar',
// color: ["red" ,"green" , "blue" ]
// }]

// 颜色渐变
// 线性渐变
// series: [
//     {
//         name: '语文',
//         type: 'bar',
//         // color: ["red", "green", "blue"], // 设置局部主题
//         data: yDataArr,// 数据
//         itemStyle: {// 设置柱状图渐变色
//             color: {
//                 type: 'linear', // 表示线性渐变
//                 x: 0,
//                 y: 0,
//                 x2: 0,
//                 y2: 1,
//                 colorStops: [
//                     {
//                         offset: 0, color: 'red',// 表示0%处为红色
//                     }, {
//                         offset: 1, color: 'blue',// 表示100%处为蓝色
//                     }
//                 ]
//             }

//         }
//     },

// ]

// 径向渐变
// series: [
//     {
//         name: '语文',
//         type: 'bar',
//         // color: ["red", "green", "blue"], // 设置局部主题
//         data: yDataArr,// 数据
//         itemStyle: {// 设置柱状图渐变色
//             color: {
//                 type: 'radial', // 表示径向渐变
//                 x: 0.5,
//                 y: 0.5,
//                 r: 0.5,
//                 colorStops: [
//                     {
//                         offset: 0, color: 'red',// 表示0%处为红色
//                     }, {
//                         offset: 1, color: 'blue',// 表示100%处为蓝色
//                     }
//                 ]
//             }

//         }
//     },

// ]

// (3)样式
// 直接样式
// itemStyle、textStyle、lineStyle、 areaStyle、 label

//高亮样式
// 在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label

// (4)自适应
// 当浏览器的大小发生变化的时候,如果想让图表也能随之适配变化
// 1.监听窗口大小变化事件
// 2.在事 件处理函数中调用ECharts实例对象的resize即可
// window.onresize = function(){
// myChart.resize();
// }


// 二、动画的使用
// 加载动画
// 显示加载动画
// mCharts.showLoading()
// 隐藏加载动画.
// mCharts.hideLoading()

// 增量动画
// 增量动画的实现方式
// mCharts.setOption
// 所有数据的更新都通过setOption实现
// 不用考虑数据到底产生了那些变化
// ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。


// 动画的配置
var option = {
    // animation: true, // 控制动画是否开启
    // // animationDuration: 7000, //动画的时长，它是以毫秒为单位
    // animationDuration: function (arg) {
    //     // console.log(arg)
    //     return 2000 * arg
    // },
    // animationEasing: 'bounceOut', //缓动动画
    // animationThreshold: 7, //动画元素的阀值
}

// 三、交互API
// ■全局echarts对象
// 全局echarts对象是引入echarts.js文件之后就可以直接使用的
//                       init()
// 初始化ECharts实例对象
// 使用主题

//                      registerTheme()
//注册主题

//                      registerMap()
//注册地图数据

//                      connect()
// 一个页面中可以有多个独立的图表
// 每一个图表对应一个ECharts实例对象
// connect可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
// 保存图片的自动拼接
// 刷新按钮
// 重置按钮
// 提示框联动、图例选择、数据范围修改等....

// ■echartsInstance对象
// eChartsInstance对象是通过echarts.init方法调用之后得到的
// setOption
// 设置或修改图表实例的配置项以及数据.
// 多次调用setOption方法
// 合并新的配置和旧的配置

// resize
// 重新计算和绘制图表
// 一般和window对象的resize事件结合使用

// on\off
// 绑定或者解绑事件处理函数

// 鼠标事件
// 常见事件: 'click'、'dblclick' 、'mousedown'、 'mousemove'、 'mouseup' 等
// 事件参数arg:和事件相关的数据信息

// ECharts事件
// 常见事件: legendselectchanged、'datazoom'. 'pieselectchanged'. 'mapselectchanged' 等
// 事件参数arg:和事件相关的数据信息

// dispatchAction
// ●触发某些行为
// ●使用代码模拟用户的行为
// mCharts.dispatchAction({
// type: 'highlight', //事件类型
// seriesIndex: 0,//图表索引
// datalndex: 1//图表中哪一项高亮
// });

// clear
// 清空当前实例，会移除实例中所有的组件和图表
// 清空之后可以再次setOption

// dispose
// 销毁当前实例不可以再次setOption